<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-title" content="IE=Edge,chrome=1" />
<title>移动大掌柜APP</title>
<style type="text/css">
  html, body {
    height: 100%;
  }
  body {
    margin: 0;
    padding: 0;
    position:relative;
    background: #FFFFFF;
  }
  .intro-pages-wrap {
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .intro-pages-each {
    /*border: 1px solid red;*/
    height: 100%;
    width: 100%;
    /*box-sizing: border-box;*/
    position: absolute;
    /*display: none;*/
    top: 100%;
  }
  .intro-pages-each.on {
    /*display: block;*/
    top: 0;
    /*transition: top 0 linear;*/
  }
  .trans {
    -webkit-transition: top 300ms ease-in-out;
  }
  .intro-pages-each .img {
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    /*width: 100%;*/
  }
  .intro-pages-each .intro-arrow {
    width: 50px;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2000;
    -webkit-animation: blink 600ms linear alternate infinite;
  }
  .intro-pages-each .btn-url {
    position: absolute;
    left: 33%;
    right: 0;
    bottom: 29.5%;
    width: 150px;
    height: 50px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  @keyframes blink {
    from {
      bottom: 0;
      opacity: 0.4;
    }
    to {
      bottom: 4px;
      opacity: 1;
    }
  }
</style>
</head>
<body>
  <div class="intro-pages-wrap">
    <div style="background: #2BA3FA;" class="intro-pages-each on"">
      <img class="img" src="/upload/dzg_introduction/1.png" />
      <img class="intro-arrow" src="/upload/dzg_introduction/arrow.png" />
    </div>
    <div style="background: #9342FF;" class="intro-pages-each">
      <img class="img" src="/upload/dzg_introduction/2.png" />
      <img class="intro-arrow" src="/upload/dzg_introduction/arrow.png" />
    </div>
    <div style="background: #FC7343;" class="intro-pages-each">
      <img class="img" src="/upload/dzg_introduction/3.png" />
      <img class="intro-arrow" src="/upload/dzg_introduction/arrow.png" />
    </div>
    <div style="background: #4273FE;" class="intro-pages-each">
      <img class="img" src="/upload/dzg_introduction/4.png" />
      <img class="intro-arrow" src="/upload/dzg_introduction/arrow.png" />
    </div>
    <div style="background: #47C5A7;" class="intro-pages-each">
      <img class="img" src="/upload/dzg_introduction/5.png" />
      <img class="intro-arrow" src="/upload/dzg_introduction/arrow.png" />
    </div>
    <div style="background: #E8534F;" class="intro-pages-each">
      <img class="img" src="/upload/dzg_introduction/6.png" />
      <div class="btn-url"></div>
    </div>
  </div>
  <script type="text/javascript" src="../template/assets/js/jquery.min.js"></script>
  <script type="text/javascript" src="../template/website/js/app.js"></script>
  <script type="text/javascript">
    $(function() {
      // var url = window.location.href;
      // setShareParams('', '重磅推荐移动大掌柜APP', window.location.origin + '/upload/file/default_head_img.png', url);
      var $items = $('.intro-pages-each');
      var index = curIndex($items);
      var startY, distanceY, top, ismoving = false;
      top = $items.eq(index).css('height');
      top = parseInt(top.substr(0, top.indexOf('px')));
      $('.intro-pages-each').on('touchstart', function(e) {
        if (ismoving) return;
        startY = e.originalEvent.changedTouches[0].pageY;
        $items.removeClass('trans');
      });
      $('.intro-pages-each').on('touchmove', function(e) {
        e.preventDefault();
        if (ismoving) return;
        distanceY = e.originalEvent.changedTouches[0].pageY - startY;
        if (distanceY < 0 && index < $items.length - 1) {
          $(this).css({'top': distanceY + 'px'});
          $items.eq(index + 1).css({'top': (top + distanceY) + 'px'});
        } else if (distanceY > 0 && index > 0) {
          $(this).css({'top': distanceY + 'px'});
          $items.eq(index - 1).css({'top': (-top + distanceY) + 'px'});
        }
      });
      $('.intro-pages-each').on('touchend', function(e) {
        if (ismoving) return;
        distanceY = e.originalEvent.changedTouches[0].pageY - startY;
        if (distanceY < -50 && index < $items.length - 1) {
          index++;
          $(this).removeClass('on').addClass('trans').css({'top': -top + 'px'});
          $items.eq(index).addClass('on trans').css({'top': 0});
          ismoving = true;
          setTimeout(function() {
            ismoving = false;
          }, 300);
        } else if (distanceY > 50 && index > 0) {
          index--;
          $(this).removeClass('on').addClass('trans').css({'top': top + 'px'});
          $items.eq(index).addClass('on trans').css({'top': 0});
          ismoving = true;
          setTimeout(function() {
            ismoving = false;
          }, 300);
        } else if (distanceY < 0 && index < $items.length - 1) {
          $(this).addClass('trans').css({'top': '0'});
          $items.eq(index + 1).addClass('trans').css({'top': top + 'px'});
        } else if (distanceY > 0 && index > 0) {
          $(this).addClass('trans').css({'top': '0'});
          $items.eq(index - 1).addClass('trans').css({'top': -top + 'px'});
        }
      });

      $('.btn-url').on('click', function(e) {
        window.location.href='https://dzg.vpclub.cn' + baseUrl + '/website/download_app.html' + window.location.search;
      });
    });

    function curIndex(arr) {
      var item = $('.on')[0];
      for (var i = 0; i < arr.length - 1; i++) {
        if (item === arr[i]) {
          return i;
        }
      }
    }
    function setShareParams(title, description, icon_url, url) {
      setCookie('share_title', title, 1);
      setCookie('share_description', description, 1);
      setCookie('share_icon_url', icon_url, 1);
      var ua = '' + navigator.userAgent.toLowerCase();
      // 微信浏览器不重复刷新
      if (ua.indexOf('micromessenger') !== -1) {
        setCookie('share_url', url, 1);
        return;
      }
      if (url !== getCookie('share_url') && /iPhone|iPad/i.test(ua)) {
        setCookie('share_url', url, 1);
        location.reload();
        console.log('reload');
      }
      setCookie('share_url', url, 1);
    }
    //返回页面分享的参数,当当前页面有canAppShare=1参数时需要添加此函数resShareParm(函数名不能改，客户端已经只调用这个函数)
    function resShareParm() {
      var regText1 = "saleType=1";
      var regText2 = "saleType=3";
      var regS1 = new RegExp(regText1, "gi");
      var regS2 = new RegExp(regText2, "gi");
      var urlpath = window.location.href.replace(regS1, "saleType=2").replace(regS2, "saleType=4");//修改平台类型(原生分享出去统一改为分享平台)：1（直销通代客下单）改为 2（直销通分享页面购买） 3（微店原生购买）改为 4（微店分享购买）
      var imgpath = window.location.origin + '/upload/dzg_introduction/dzg_logo.png';
      var title = "移动大掌柜APP";
      var description = "大掌柜送话费啦！";
      var data = "url=" + urlpath + "&&img=" + imgpath + "&&title=" + title + "&&description=" + description + "";
      return data;
    }
  </script>
</body>
</html>